<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        span {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<!-- 
1. 使用JavaScript验证表单内容，要求如下。
2. 姓名不能为空，且不能超过10位；
3. 年龄必须是正整数，且在1-150之间；
4. 密码不能为空，且不能少于6位；
5. 确认密码不能为空，且必须和密码一致；
6. 手机号码不能为空，且必须为1开头的11位数字。
7. 每个输入框，在用户输入完毕，值被改变且失去焦点之后检测数据是否合法；
8. 直接点击“注册”按钮，在注册提交之前也能够进行数据检测。
-->
<script type="text/javascript">
    /* 存放已经注册的用户名 */
    let users = [];

    function judgment() {
        if (checkName() && checkAge() && checkPassword() && checkConfirmPassword() && checkPhoneNumber()) {
            document.getElementById("result").innerHTML = "<h1>注册成功</h1>"
            let name = document.getElementById("user_name").value;
            users.push(name);
            /* 为了测试方便，修改为false，实际上应该为true */
            return false;
        } else {
            document.getElementById("result").innerHTML = "<h1>请重新注册</h1>"
            return false;
        }
    }
</script>

<form action="#" method="get" onsubmit="return judgment()">
    <label>
        输入姓名：
        <input type="text" id="user_name" onchange="checkName()"><span></span><br>
        输入年龄：
        <input type="text" id="user_age" onchange="checkAge()"><span></span><br>
        输入密码：
        <input type="password" id="user_password" onchange="checkPassword()"><span></span><br>
        确认密码：
        <input type="password" id="confirm_password" onchange="checkConfirmPassword()"><span></span><br>
        手机号码：
        <input type="text" id="phone_number" onchange="checkPhoneNumber()"><span></span><br>
    </label>
    <input type="submit" value="注册">
    <div id="result"></div>
</form>

<!-- 输入文本判断 -->
<script type="text/javascript">
    let spans = document.getElementsByTagName("span");

    function checkName() {
        let name = document.getElementById("user_name").value;

        /* 姓名不能为空，且不能超过10位*/
        if (name.length === 0) {
            spans[0].innerHTML = "姓名不能为空";
            return false;
        } else if (name.length > 10) {
            spans[0].innerHTML = "输入长度不能超过10个字符";
            return false;
        } else if (users.indexOf(name) !== -1) {
            spans[0].innerHTML = "该名字已经存在！";
            return false;
        }

        iconDisplay(spans[0]);
        return true;
    }

    function checkAge() {
        let age = document.getElementById("user_age").value;
        
        /* 年龄必须是正整数，且不能少于6位 */
        if (!/^[1-9]\d*$/.test(age) || age <= 0 || age >= 150) {
            spans[1].innerHTML = "输入年龄不正确";
            return false;
        }

        iconDisplay(spans[1]);
        return true;
    }

    function checkPassword() {
        let password = document.getElementById("user_password").value;

        /* 密码不能为空，且不能少于6位 */
        if (password.length === 0 || password.length < 6) {
            spans[2].innerHTML = "密码长度不能小于6位";
            return false;
        }

        iconDisplay(spans[2]);
        return true;
    }

    function checkConfirmPassword() {
        let password = document.getElementById("user_password").value;
        let confirm_password = document.getElementById("confirm_password").value;

        /* 确认密码不能为空，且必须和密码一致 */
        if (confirm_password.length === 0) {
            spans[3].innerHTML = "确认密码不能为空";
            return false;
        } else if (password !== confirm_password) {
            spans[3].innerHTML = "两次输入的密码不一致";
            return false;
        }

        iconDisplay(spans[3]);
        return true;
    }

    function checkPhoneNumber() {
        let number = document.getElementById("phone_number").value;

        /* 正则表达式规则：开头为1的长度为11的数 */
        let reg = /^1\d{10}$/;
        if (!reg.test(number)) {
            spans[4].innerHTML = "电话号码格式不正确";
            return false;
        }

        iconDisplay(spans[4]);
        return true;
    }

    function iconDisplay(span) {
        span.innerHTML = "<img src='./../asset/images/true.png' alt='正确' width='25' height='25'>";
    }
</script>
</body>
</html>